<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useTerminalsStore } from '../../stores/terminals';
import { storeToRefs } from 'pinia';
import { useWorkspaceStore } from '../../stores/workspace';
import { listShells } from '../../tauriApi';

const open = ref(false);
const anchorRef = ref(null);
const menuRef = ref(null);
const terms = useTerminalsStore();
const active = computed(() => terms.items.find(t => t.id === terms.activeId) || null);
const shells = ref([]);
const { workspaceRoot } = storeToRefs(useWorkspaceStore());

function ensureDefault() {
  if (!(terms.items || []).length) {
    const cwd = String(workspaceRoot.value || '');
    terms.create({ name: 'Terminal', cwd });
  }
  if (!terms.activeId && terms.items.length) terms.activeId = terms.items[0].id;
}

function toggle() { open.value = !open.value; }
function close() { open.value = false; }
function select(id) { terms.activate(id); close(); }
function killActive() { if (terms.activeId) { terms.remove(terms.activeId); ensureDefault(); } close(); }

function newDefault() { const cwd = String(workspaceRoot.value || ''); const t = terms.create({ name: 'Terminal', cwd }); terms.activate(t.id); close(); }
async function newFromShell(spec) {
  const cwd = String(workspaceRoot.value || '');
  const t = terms.create({ name: spec.name, program: spec.program, args: spec.args || [], cwd });
  terms.activate(t.id); close();
}

function onDocClick(e) {
  const a = anchorRef.value; const m = menuRef.value; const t = e.target;
  if (a && a.contains(t)) return;
  if (m && m.contains(t)) return;
  close();
}

onMounted(async () => {
  ensureDefault();
  try { shells.value = await listShells(); } catch {}
  document.addEventListener('mousedown', onDocClick);
});
onBeforeUnmount(() => { document.removeEventListener('mousedown', onDocClick); });
</script>

<template>
  <div class="relative" ref="anchorRef">
    <button class="h-6 px-2 rounded hover:bg-subtle-bg" @click="toggle">
      {{ active?.name || 'Terminal' }} ▾
    </button>
    <div v-show="open" ref="menuRef" class="absolute right-0 top-full mt-1 min-w-[200px] z-50 bg-panel-bg border border-panel-border rounded shadow p-1 text-[12px]">
      <div v-if="terms.items.length" class="max-h-64 overflow-auto">
        <div class="px-2 py-1 text-slate-500 dark:text-neutral-400">Terminals</div>
        <button v-for="t in terms.items" :key="t.id" class="block w-full text-left px-2 py-1 rounded hover:bg-slate-100 dark:hover:bg-neutral-800"
                :class="t.id===terms.activeId ? 'bg-subtle-bg' : ''"
                @click="select(t.id)">{{ t.name }}</button>
        <div class="my-1 h-px bg-panel-border" />
      </div>
      <div class="px-2 py-1 text-muted-fg">New</div>
      <button class="block w-full text-left px-2 py-1 rounded hover:bg-subtle-bg" @click="newDefault">New Terminal</button>
      <button v-for="s in shells" :key="s.id" class="block w-full text-left px-2 py-1 rounded hover:bg-subtle-bg" @click="newFromShell(s)">{{ s.name }}</button>
      <div class="my-1 h-px bg-panel-border" />
      <button class="block w-full text-left px-2 py-1 rounded hover:bg-slate-100 dark:hover:bg-neutral-800 text-red-500" @click="killActive">Kill Active</button>
    </div>
  </div>
  
</template>


